:local {
  .search_wrap {
    display: inline-block;
    vertical-align: top;
    // margin-top: 14px;
    margin-bottom: 18px;
    :global {
      .ant-input-search {
        .ant-input {
          background-color: #ffffff;
          border: 1px solid #e4e4e4;
          outline: none;
          color: #424242;
          font-size: 14px;

          &:focus {
            border-color: #50e399 !important;
            box-shadow: 0 0 0 2px rgba(80, 227, 153, 0.1);
            & ~ .ant-input-suffix {
              .ant-input-search-button {
                background-color: #50e399;
                border-color: #50e399;
                .anticon-search {
                  color: #fff;
                }
              }
            }
          }
        }
        &:hover {
          .ant-input:not(.ant-input-disabled) {
            border-color: #7fffbe;
          }
          .ant-input-suffix .ant-input-search-button {
            background-color: #7fffbe;
            border-color: #7fffbe;
            .anticon-search {
              color: #fff;
            }
          }
        }
        &:active {
          .ant-input:not(.ant-input-disabled) {
            border-color: #40bc7e;
          }
          .ant-input-suffix .ant-input-search-button {
            background-color: #40bc7e;
            border-color: #40bc7e;
            .anticon-search {
              color: #fff;
            }
          }
        }
        .ant-input-suffix {
          .ant-btn-clicked {
            text-shadow: none;
            &:after {
              border-color: rgba(93, 237, 164, 1);
            }
          }
        }
        .ant-input-search-button {
          background-color: #e4e4e4;
          width: 42px;
          height: 32px;
          border-radius: 4px;
          padding: 0;
          border-color: #e4e4e4;
        }
        .ant-input-search {
          &:hover {
            .ant-input-search-button {
            }
          }
          &:active {
            .ant-input-search-button {
              background-color: #40bc7e;
              border-color: #40bc7e;
            }
          }
        }
        .ant-input-suffix .anticon-search {
          color: #a6a6a6;
          font-size: 20px;
          line-height: 32px;
        }
      }
    }
  }
  .theme_darker {
    :global {
      .ant-input-search {
        .ant-input {
          background-color: #4c596f;
          border: 1px solid #4c596f;
          color: #fff;
          &:focus {
            border-color: #4c596f !important;
            box-shadow: 0 0 0 2px rgba(80, 227, 153, 0.1);
            & + .ant-input-suffix {
              .ant-input-search-button {
                background-color: #213544;
                border-color: #213544;
                .anticon-search {
                  color: #fff;
                }
              }
            }
          }
        }
        &:hover {
          .ant-input:not(.ant-input-disabled) {
            border-color: #4c596f;
          }
          .ant-input-suffix .ant-input-search-button {
            background-color: #243b4f;
            border-color: #243b4f;
            .anticon-search {
              color: #fff;
            }
          }
        }
        &:active {
          .ant-input:not(.ant-input-disabled) {
            border-color: #4c596f;
          }
          .ant-input-suffix .ant-input-search-button {
            background-color: #213544;
            border-color: #213544;
            .anticon-search {
              color: #fff;
            }
          }
        }
        .ant-input-suffix {
          .ant-btn-clicked {
            &:after {
              border-color: #213544;
            }
          }
        }
        .ant-input-search-button {
          background-color: #213544;
          border-color: #213544;
        }
      }
    }
  }
}
